<template>
  <div v-loading="billStore.isLoading"
       element-loading-text="正在加载中..."
       class="bill-daily-list">
    <el-date-picker v-model="billStore.billQueryForm.billYear"
                    type="year" :editable="false" style="width: 120px;"
                    @change="billStore.refreshInfo()"/>

    <el-empty v-if="billDailyInfo.dateList.length === 0"/>

    <el-scrollbar>
      <bill-daily-item v-for="(item, index) in billDailyInfo.dateList"
                       :key="index" :date="item"/>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import BillDailyItem from '@/components/Bill/BillDailyItem.vue'
import { reactive, watch } from 'vue'
import { useBillStore } from '@/store/bill.ts'

const billStore = useBillStore()

watch(() => billStore.isRefresh, () => {
  updateInfo()
})

const billDailyInfo = reactive({
  dateList: [] as string[]
})

const updateInfo = () => {
  const dateList = billStore.billRecordList.map((item) => item.date)
  billDailyInfo.dateList = [...new Set(dateList)] as string[]
}
</script>

<style lang="scss">
.bill-daily-list {
  height: calc(100vh - 120px);
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 1vh;

  .el-date-editor {
    align-self: center;
  }

  .el-scrollbar {
    .el-scrollbar__view {
      display: flex;
      flex-direction: column;
      gap: 2vh;
    }
  }
}
</style>
